methods

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-10-23 09:58:58

1820 瀏覽

分享至

菜菜菜的 Vue 30天 - Day8

methods

繼上一章提到了 methods 的這個方法，我們會在裡面宣告 function 來做使用，function 就不多做解釋相信大家應該都有一定的認識哈哈。

就一樣直接來看一下怎麼使用囉～

計數器

好吧！！我承認我老套！！而且還食古不化！！

上一章使用過了，但是～

好啦好啦，開玩笑的我們就開始吧～

我們先來看一下前一章寫的程式碼：

<body>
    <div id="app">
        <button v-on:click="count += 1">add</button>
        <span>{{count}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      }
    })
</script>

跟 data 一樣在 Vue 實例裡面加上一個 methods，這樣我們就能在 methods 裡面撰寫 function。

那在寫 function 的時候要注意一點，一定要用 function(){} 的方式，這樣子裡面使用 this 才會指向 Vue 實例，不要使用箭頭函式(arrow function)因為這樣 this 就不會是指向 Vue 實例，就會沒辦法取到 Vue 實例其他的方法。

這次我們就把 methods 加上去吧～

<body>
    <div id="app">
        <button v-on:click="addCount">add</button>
        <span>{{count}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        addCount: function(){
            this.count += 1;
        }
      }
    })
</script>

另外如果需要傳入參數的話如下：

<button v-on:click="addCount(something)">add</button>   //如果要傳入參數就再加上(argument)

addCount: function(argument){   // 將參數傳入
    this.count += 1;
}

這樣也能達到一樣的效果。

另外 function 的寫法也能夠寫成以下這樣：

<script>
    const vm = new Vue({
      el: '#app',
      methods: {
        addCount(){
            this.count += 1;
        }
      }
    })
</script>

還有還有～～～(囉不囉唆啊！！)

我們在一個 function 裡面也能夠再去呼叫其他的 function 執行喲～

<script>
    const vm = new Vue({
      el: '#app',
      methods: {
        addCount(){
            this.count += 1;
            this.doubleCount();
        },
        doubleCount(){
            this.count = this.count * 2;
        }
      }
    })
</script>